<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" style="--el-dialog-width: 80%;">
<div class="contentView" v-loading="formLoading">
    <ContentWrap>
  <el-form
    class="-mb-15px"
    :model="queryParams"
    ref="formRef"
    :inline="true"
    label-width="100px"
  >
  <el-form-item label="点检项目名称" prop="spotCheckProjectName">
      <el-input
        v-model="queryParams.spotCheckProjectName"
        clearable
        @keyup.enter="handleQuery"
        class="!w-220px"
      />
    </el-form-item>
  <el-form-item label="点检项目编号" prop="spotCheckProjectCode">
      <el-input
        v-model="queryParams.spotCheckProjectCode"
        clearable
        @keyup.enter="handleQuery"
        class="!w-220px"
      />
    </el-form-item>
    <el-form-item label="实时周期" prop="dictImplementationCycle">
      <el-select
        v-model="queryParams.dictImplementationCycle"
        placeholder="请选择实时周期"
        clearable
        class="!w-220px"
      >
      <el-option
          v-for="dict in getIntDictOptions('dict_implementation_cycle')"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
    <el-button type="primary" @click="handleQuery">搜索</el-button>
    <el-button @click="resetQuery">重置</el-button>
  </el-form-item>
  </el-form>
</ContentWrap>
<ContentWrap>
 <el-table
  ref="multipleTableRef" 
  v-loading="loading" 
  :data="list" 
  :height="350"
  border 
  @selection-change="handleSelectionChange"
  >
    <el-table-column align="center" type="selection" :selectable='checkboxSelect'/>
    <el-table-column label="序号" align="left" header-align="left" type="index" />
    <el-table-column label="点检编码" align="left" header-align="left" prop="spotCheckProjectCode" />
    <el-table-column label="点检项目名称" align="left" header-align="left" prop="spotCheckProjectName" />
    <el-table-column label="判断基准" align="left" header-align="left" prop="criterion" />
    <el-table-column label="部位" align="left" header-align="left" prop="part" />
    <el-table-column
      label="实施时间"
      align="left" 
      header-align="left"
      prop="implementationTime"
    />
    <el-table-column label="点检方式" align="left" header-align="left" prop="spotCheckMethod" />
    <el-table-column label="实施周期" align="left" header-align="left" prop="dictImplementationCycle" >
    <template #default="scope">
      <byte-tag
        className="test"
        :type="DICT_TYPE.DICT_IMPLEMENTATION_CYCLE"
        :value="scope.row.dictImplementationCycle"
      />
    </template>
    </el-table-column>
    <el-table-column label="填写类型" align="left" header-align="left" prop="dictFillingType">
      <template #default="scope">
      <byte-tag
        className="test"
        :type="DICT_TYPE.DICT_FILLING_TYPE"
        :value="scope.row.dictFillingType"
      />
    </template>
      </el-table-column>
  </el-table>
</ContentWrap>
</div>
<template #footer>
    <el-button class="mr-5px" @click="submitForm" type="primary" :disabled="formLoading"
      >确 认</el-button
    >
    <el-button @click="goBack">关 闭</el-button>
  </template>
</Dialog>
</template>
<script setup>
import {DICT_TYPE,getIntDictOptions } from '@/utils/dict'
import * as DeviceCheckUpkeepApi from '@/api/config/deviceCheckUpkeep'
import ByteTag from './ByteTag.vue'
const { t } = useI18n() // 国际化
// const message = useMessage() // 消息弹窗
const loading = ref(true) // 列表的加载中
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const total = ref(0) // 列表的总页数
const dialogTitle = ref('') // 弹窗的标题
const multipleTableRef =ref()//表单实例
const formRef = ref() // 表单 Ref
const list = ref([]) // 列表的数据
const dialogVisible = ref(false)//弹窗是否展示
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const message = useMessage() // 消息弹窗
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
id: undefined,
spotCheckProjectName: undefined,
spotCheckProjectCode: undefined,
dictImplementationCycle:undefined
})


/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

// 多选
const multipleSelection = ref([])
const handleSelectionChange = (val)=>{
multipleSelection.value=val
}

//请求数据
const getList = async () => {
loading.value = true
try {
const data = await DeviceCheckUpkeepApi.getDeviceCheckUpkeepPage({dictEnableStatus:10})
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}



//父组件传递过来的数据
const props = defineProps({
  selectForm: {
        type: Array,
        default: null,
    }
})
const formList = toRefs(props)

//禁用选框
const checkboxSelect =(rowIndex)=>{
  console.log('rowIndex',JSON.stringify(formList.selectForm.value))
  let result =  formList.selectForm.value?.some(item=>{
    return JSON.stringify(item.id)===JSON.stringify(rowIndex.id)
  })
  return !result
}


// /** 打开弹窗 */
const open = async (type) => {
  dialogVisible.value = true
  // dialogTitle.value = t('action.' + type)
  formType.value = type
  
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗


const emit = defineEmits(['selectData'])
const submitForm = async () => {
  // formLoading.value = true
  if(multipleSelection.value.length !=0){
    console.log('multipleSelection',multipleSelection.value)
    emit('selectData',multipleSelection.value)
    message.success(t('common.createSuccess'))
    multipleTableRef.value.clearSelection()
    dialogVisible.value=false
  }else{
    message.info('请选择点检项目')
  }

}

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.spotCheckProjectName=undefined,
  queryParams.spotCheckProjectCode=undefined,
  queryParams.dictImplementationCycle=undefined
}

//返回
const goBack = async() => {
  dialogVisible.value=false
}

onMounted( async () => {
  getList()
})


</script>
<style scoped>
.table{
width: 100%;
height: 100%;
}
.table .box{
padding: 10px;
}
.table .box button{
margin: 5px;
}

.selectForm{
display: flex;
border: 1px solid #ebeef5;
margin-top: 10px;
padding: 18px 0px 10px 18px;
margin-bottom: 20px;
flex-direction: column;
}
</style>  